<template>
	<el-dialog :title='title' class='c-dialog-fixed print' :visible.sync='show' :append-to-body='inDialog' width='60%'
		@open='openDialog' @close='closeDialog'>
		<div v-loading='loading' style='position: relative;'>
			<el-alert class='no-print' title='为避免打印格式出现异常，请使用Firefox（火狐）浏览器打印' type='success'
				style='margin-bottom:10px'></el-alert>
			<div class="record-box" :class='{ "no-print": selectMode && !item.selected }' v-for='item in list'
				:key='item.id'>
				<el-checkbox class='no-print' size='mini' style="position: absolute;right:10px;top:8px;z-index: 99"
					v-model="item.selected" border v-show='selectMode'>
					选择
				</el-checkbox>
				<div>
					<div style='font-size:22px;text-align: center;font-weight: bold'>IT资产领用单</div>
					<div style='margin: 5px 0px'>
						<div style='display: flex'>
							<div style='flex:1'>领用编号：{{ item.no }}</div>
							<div style='flex:1'>录入员：{{ item.create_user_name }}</div>
							<div style='flex:1'>打印时间：{{ $commonJs.formatDate(new Date()) }}</div>
						</div>
						<div style='display: flex'>
							<div style='flex:1'>领用日期：{{ item.record_date }}</div>
							<div style='flex:1'>领用部门：{{ item.dep_name }}</div>
							<div style='flex:1'>领用员工：{{ item.employee_name }}</div>
						</div>
						<div>使用地点：{{ item.place }}</div>
						<div>领用备注：{{ item.remarks }}</div>
					</div>
					<table class='c-table' style='border:2px solid #000'>
						<tr class='label'>
							<td style='width:40px'>序号</td>
							<td style='width:80px'>资产编号</td>
							<td>资产型号</td>
							<td>资产类型</td>
							<td style='width:60px'>领用数量</td>
						</tr>
						<tr v-for='(a, index) in item.asset_list'>
							<td style='text-align: center'>{{ index + 1 }}</td>
							<td>{{ a.asset_no }}</td>
							<td>{{ a.asset_model }}</td>
							<td>{{ a.asset_type_name }}</td>
							<td style='text-align: center'>{{ Number(a.amount) }}</td>
						</tr>
					</table>
					<div style='display:flex;margin:5px 0px'>
						<div style='flex:1'>领用人签字：</div>
						<div style='flex:1;text-align: right;padding-right: 150px'>签字时间：</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div style='clear: both'></div> -->
		</div>
		<span slot="footer">
			<el-button type='primary' @click="print">打 印</el-button>
			<el-tooltip content='开启后，可选择个别标签进行单独打印'>
				<el-checkbox v-model="selectMode" border>选择模式</el-checkbox>
			</el-tooltip>
			<el-button @click="show = false">关 闭</el-button>
		</span>
	</el-dialog>
</template>
<script>
import assetApi from '@/api/it/assetUseRecord'
export default {
	components: {},
	props: {
		inDialog: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			selectMode: false,
			show: false,
			loading: false,
			list: [],
			resolve: null
		}
	},
	computed: {
		title() {
			return 'IT资产领用单打印'
		},
		buttonText() {
			return this.isEdit ? '更 新' : '创 建'
		}
	},
	methods: {
		open() {
			this.show = true
			return new Promise((resolve, reject) => {
				this.resolve = resolve
			})
		},
		getData(params) {
			this.loading = true
			assetApi.getPrintRecordList({ ...params, noPage: 1 }).then(res => {
				this.loading = false
				this.list = res.data.list
			})
			return this
		},
		openDialog() {
			this.$nextTick(() => {
				if (this.resolve) {
					this.resolve(this)
				}
			})
		},
		closeDialog() {
			this.selectMode = false
			this.imgLoadCount = 0
			this.list = []
		},
		save() {
			this.buttonLoading = true
			this.$refs.form.save().catch(() => {
				this.buttonLoading = false
			})
		},
		print() {
			window.print()
		}
	}
}
</script>
<style lang='scss' scoped>
	.record-box {
		color: #000;
		line-height: 1.5;
		font-family: '宋体';
		position: relative;
		font-size: 14px;
		padding: 10px;
		border-radius: 4px;
		border: 1px solid black;
		margin-bottom: 10px;
	}

	@media print {
		.record-box {
			border: 1px solid #fff;
			page-break-inside: avoid;
		}

		.print {
			width: 210mm;
		}
	}
</style>